<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>

    <!-- font-icon -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/font-welkin/css/iconfont.css" type="text/css"/>
    <!-- bootstrap-core -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap/v3.3.7/css/bootstrap.min.css" type="text/css"/>

    <!-- plugins -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.min.css" type="text/css"/>
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-validator/css/bootstrapValidator.css" type="text/css"/>
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" type="text/css"/>

    <link rel="stylesheet" href="${ctxFrontStatic }/style/welkin.css" type="text/css"/>
    <link rel="stylesheet" href="${ctxFrontStatic }/style/header.css" type="text/css"/>
    <link rel="stylesheet" href="${ctxFrontStatic }/style/app.css" type="text/css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${ctxFrontStatic }/libs/html5shiv.min.js"></script>
    <script type="text/javascript" src="${ctxFrontStatic }/libs/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<section class="main">
    <div class="container-fluid ">
        <div class="row">
            <div class="col-sm-24">
                <ul class="pull-left position">
                    <li>当前位置:</li>
                    <li>首页</li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-16 ">
                <div class="top-box">
                    <div class="title">
                        <span class="title-line"></span>
                        <span class="title-w">账户总览</span>
                    </div>
                    <div class="row top-cont">
                        <div class="col-sm-12">
                            <ul class="col-sm-8 text-center">
                                <li>
                                    <img src="${ctxFrontStatic }/images/gongsi.png" alt="">
                                </li>
                                <li class="pass">
                                    <img src="${ctxFrontStatic }/images/renzheng.png" alt="">
                                    <span>已认证</span>
                                </li>
                            </ul>
                            <ul class="col-sm-16">
                                <li>
                                    <span>Hi</span>
                                </li>
                                <li class="company-name">
                                    <span>${fns:getUser().name}</span>
                                </li>
                                <%--<li class="use-name">--%>
                                    <%--<p>管理员: <span>${fns:getUser().name}</span></p>--%>
                                <%--</li>--%>
                            </ul>
                        </div>
                        <div class="col-sm-12">
                            <ul class="col-sm-12">
                                <li class="numb">
                                    <span>${amount}</span>
                                </li>
                                <li>
                                    <p class="numb-tlt">账户余额(条)</p>
                                    <%--<button type="button" class="btn btn-primary btn-sm" href="${ctxFront}/view/recharge">充值</button>--%>
                                </li>
                            </ul>

                            <%--<ul class="col-sm-12">--%>
                                <%--<li class="numb">--%>
                                    <%--<span>1</span>--%>
                                <%--</li>--%>
                                <%--<li>--%>
                                    <%--<p class="numb-tlt">我的模板(个)</p>--%>
                                    <%--<button type="button" class="btn btn-primary btn-sm">查看</button>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        </div>


                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="top-box">
                    <div class="title">
                        <span class="title-line"></span>
                        <span class="title-w">商务联系人</span>
                    </div>
                    <ul class="text-center top-cont">
                        <li>
                            <img src="${ctxFrontStatic }/images/shangwulianxiren.png" alt="">
                        </li>
                        <li class="contacts">
                            <p>姓名: <span>曾艳</span></p>
                            <p>联系电话:<span>15068164172</span></p>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-8">
                <div class=" bottom-box">
                    <div class="title">
                        <span class="title-line"></span>
                        <span class="title-w">短信用量</span>
                    </div>
                    <div id="message" class="col-sm-24 text-center" style="height: 300px"></div>
                </div>

            </div>
            <div class="col-sm-16">
                <div class="bottom-box">
                    <div class="title">
                        <span class="title-line"></span>
                        <span class="title-w">消费金额</span>
                        <div class="pull-right">
                            <input  class="form-control" placeholder="请选择日期"  id="datetimepicker-one" value="${chooseTime}" onblur="myFunction()">
                            <%--<input class="form-control" placeholder="请选择日期"  id="datetimepicker-one" readonly>--%>
                        </div>
                        <div id="consume" class="col-sm-24 text-center" style="height: 300px"></div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</section>


<!--js-->
<script type="text/javascript" src="${ctxFrontStatic }/libs/jquery/v1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap/v3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/js/navbar.js"></script>

<script>
    $(function () {
        $(function () {
            $('#datetimepicker-one').datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                minView: 'month',
                autoclose: true,//选中关闭
                todayBtn: true//今日按钮
            });
        });

        //eachart 图形自适应
        window.onresize = function () {
            myChart.resize();
            myChart1.resize();

        }
        var myChart = echarts.init(document.getElementById('message'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color: ['#ef8342', '#cccccc'],
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['剩余条数', '已用条数']
            },
            series: [
                {
                    name: '短信用量',
                    type: 'pie',
                    radius: ['60%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '24',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: ${amount}, name: '剩余条数'},
                        {value: ${fns:getUser().baseUserAmount.total}-${fns:getUser().baseUserAmount.amount}, name: '已用条数'},

                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        var myChart1 = echarts.init(document.getElementById('consume'));
        var option = {
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
            },
            series: [{
               data: [${baseAccountAmountLogs.dayAmount[0]}, ${baseAccountAmountLogs.dayAmount[1]}, ${baseAccountAmountLogs.dayAmount[2]}, ${baseAccountAmountLogs.dayAmount[3]}, ${baseAccountAmountLogs.dayAmount[4]}, ${baseAccountAmountLogs.dayAmount[5]}, ${baseAccountAmountLogs.dayAmount[6]}],
//                data:[600,700,800,900,800,700,600],
                type: 'line',
                areaStyle: {}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);
    });

    function myFunction(){
        var chooseTime = document.getElementById("datetimepicker-one").value;
        console.log(chooseTime);
        console.log("+++++++++++++++++++++++++++++++++++++");
        window.location.replace("/front/consume/weekConsume?time=${chooseTime}")
    }

</script>

</body>
</html>